<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--用户数据-->
      <el-col :xs="15" :sm="18" :md="19" :lg="20" :xl="20">
        <!--工具栏-->
        <div class="head-container">
          <div class="center_f" v-show="isShow">
            <!-- 搜索 -->
            <div class="box_si">
              <el-input
                placeholder="请输入姓名"
                v-model="input"
                clearable>
              </el-input>
            </div>
            <!--             日期-->
            <div class="block">
              <el-date-picker
                v-model="menuDate"
                type="daterange"
                align="right"
                unlink-panels
                range-separator=":"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions">
              </el-date-picker>
            </div>
            <el-button type="success" icon="el-icon-search" size="small" class="box_ss">搜索</el-button>
            <el-button type="warning" icon="el-icon-refresh" size="small" @click="resetForm()">重置</el-button>
          </div>
          <!--          增删改-->
          <div class="list_box_c">
              <span class="list_box_left">
                <el-button type="primary" size="small" icon="el-icon-plus" @click="addMembers()">新增</el-button>
                <el-button type="danger" disabled size="small" icon="el-icon-delete">删除</el-button>
                <el-button type="warning" size="small" icon="el-icon-download">导出</el-button>
              </span>
            <div class="list_box_right">
              <el-button icon="el-icon-search" size="small" @click="changeIsShow()"></el-button>
              <el-button icon="el-icon-refresh" size="small" @click="refresh()"></el-button>
            </div>
          </div>
          <!--          新增用户-->
          <el-dialog title="新增菜单" :visible.sync="isAddMembers" width="30%" style="font-weight: bold">
            <el-form ref="menusForm" :model="menusForm" class="demo-ruleForm">
              <div class="top">
                <span>菜单类型</span>
                <el-radio-group v-model="labelPosition" size="small">
                  <el-radio-button label="left">目录</el-radio-button>
                  <el-radio-button label="right">菜单</el-radio-button>
                </el-radio-group>
              </div>
              <el-form-item label="菜单图标" prop="icon">
                <div class="el-input-box" style="display: flex">
                  <el-input v-model="menusForm.icon" placeholder="点击选择图标"></el-input>
                </div>
              </el-form-item>
              <div class="el-left">
                <el-form-item label="外链菜单" prop="d">
                  <el-radio-group v-model="menusForm.d" size="small">
                    <el-radio-button label="是">是</el-radio-button>
                    <el-radio-button label="否">否</el-radio-button>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="菜单缓存" prop="e" v-show="labelPosition == 'right' ? true:false">
                  <el-radio-group v-model="menusForm.e" size="small">
                    <el-radio-button label="是">是</el-radio-button>
                    <el-radio-button label="否">否</el-radio-button>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="菜单可见" prop="f">
                  <el-radio-group v-model="menusForm.f" size="small">
                    <el-radio-button label="是">是</el-radio-button>
                    <el-radio-button label="否">否</el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </div>
              <div class="el-top">
                <el-form-item label="菜单标题" prop="name">
                  <div class="el-input-box" style="display: flex">
                    <el-input v-model="menusForm.name" placeholder="菜单标题"></el-input>
                  </div>
                </el-form-item>
                <el-form-item label="路由地址" prop="address" v-show="labelPosition == 'right' ? true:false">
                  <div class="el-input-box" style="display: flex">
                    <el-input v-model="menusForm.address" placeholder="路由地址"></el-input>
                  </div>
                </el-form-item>
              </div>
              <div class="el-top">
                <el-form-item label="组件名称" prop="menus_name">
                  <div class="el-input-box" style="display: flex">
                    <el-input v-model="menusForm.menus_name" placeholder="匹配组件内组件"></el-input>
                  </div>
                </el-form-item>
                <el-form-item label="菜单排序" prop="a">
                  <div class="el-input-box" style="display: flex">
                    <el-input-number v-model="menusForm.a" controls-position="right" @change="handleChange" :min="1"></el-input-number>
                  </div>
                </el-form-item>
              </div>
              <el-form-item label="上级类目" prop="catalog">
                <div class="el-center" style="display: flex">
                  <el-cascader v-model="menusForm.catalog" :options="options" :show-all-levels="false" clearable style="width: 100%"></el-cascader>
                </div>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="closeDialog()">取 消</el-button>
              <el-button type="primary" @click="submitForm()">确 定</el-button>
            </span>
          </el-dialog>
          <!--          修改用户-->
          <el-dialog title="修改菜单" :visible.sync="centerDialogVisible" width="30%" style="font-weight: bold">
            <el-form ref="menusForm" :model="updateMenuForm" class="demo-ruleForm">
              <div class="top">
                <span>菜单类型</span>
                <el-radio-group v-model="labelPosition" size="small">
                  <el-radio-button label="left">目录</el-radio-button>
                  <el-radio-button label="right">菜单</el-radio-button>
                </el-radio-group>
              </div>
              <el-form-item label="菜单图标" prop="icon">
                <div class="el-input-box" style="display: flex">
                  <el-input v-model="updateMenuForm.icon" placeholder="点击选择图标"></el-input>
                </div>
              </el-form-item>
              <div class="el-left">
                <el-form-item label="外链菜单" prop="d">
                  <el-radio-group v-model="updateMenuForm.d" size="small">
                    <el-radio-button label="是">是</el-radio-button>
                    <el-radio-button label="否">否</el-radio-button>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="菜单缓存" prop="e" v-show="labelPosition == 'right' ? true:false">
                  <el-radio-group v-model="updateMenuForm.e" size="small">
                    <el-radio-button label="是">是</el-radio-button>
                    <el-radio-button label="否">否</el-radio-button>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="菜单可见" prop="f">
                  <el-radio-group v-model="updateMenuForm.f" size="small">
                    <el-radio-button label="是">是</el-radio-button>
                    <el-radio-button label="否">否</el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </div>
              <div class="el-top">
                <el-form-item label="菜单标题" prop="name">
                  <div class="el-input-box" style="display: flex">
                    <el-input v-model="updateMenuForm.name" placeholder="菜单标题"></el-input>
                  </div>
                </el-form-item>
                <el-form-item label="路由地址" prop="address" v-show="labelPosition == 'right' ? true:false">
                  <div class="el-input-box" style="display: flex">
                    <el-input v-model="updateMenuForm.address" placeholder="路由地址"></el-input>
                  </div>
                </el-form-item>
              </div>
              <div class="el-top">
                <el-form-item label="组件名称" prop="menus_name">
                  <div class="el-input-box" style="display: flex">
                    <el-input v-model="updateMenuForm.menus_name" placeholder="匹配组件内组件"></el-input>
                  </div>
                </el-form-item>
                <el-form-item label="菜单排序" prop="a">
                  <div class="el-input-box" style="display: flex">
                    <el-input-number v-model="updateMenuForm.a" controls-position="right" @change="handleChange" :min="1"></el-input-number>
                  </div>
                </el-form-item>
              </div>
              <el-form-item label="上级类目" prop="catalog">
                <div class="el-center" style="display: flex">
                  <el-cascader v-model="updateMenuForm.catalog" :options="options" :show-all-levels="false" clearable style="width: 100%"></el-cascader>
                </div>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="closeDialog()">取 消</el-button>
              <el-button type="primary" @click="sumbitEditRow()">确 定</el-button>
            </span>
          </el-dialog>
          <el-table
            :data="tableData"
            style="width: 100%"
            row-key="id"
            :tree-props="{children: 'children'}">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              prop="name"
              label="菜单标题">
            </el-table-column>
            <el-table-column
              prop="icon"
              label="图标">
            </el-table-column>
            <el-table-column
              prop="a"
              label="排序">
            </el-table-column>
            <el-table-column
              prop="b"
              label="权限标识">
            </el-table-column>
            <el-table-column
              prop="c"
              label="组件路径">
            </el-table-column>
            <el-table-column
              prop="d"
              label="外链"
              width="75">
            </el-table-column>
            <el-table-column
              prop="e"
              label="缓存"
              width="75">
            </el-table-column>
            <el-table-column
              prop="f"
              label="可见"
              width="75">
            </el-table-column>
            <el-table-column
              prop="date"
              label="创建日期">
            </el-table-column>
            <el-table-column
              prop="operate"
              label="操作"
              width="150px">
              <template slot-scope="scope">
                <el-button type="primary" size="medium" icon="el-icon-edit" @click="modifyData(scope.$index, scope.row)" circle></el-button>
                <el-button class="btn_x" size="medium" type="text" icon="el-icon-delete" @click="removeRoles(scope.row.id)"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  export default{
    inject: ['reload'],
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        centerDialogVisible: false,
        isAddMembers: false,
        input: '',
        // 当前页码
        pageNum: 0,
        // 默认每页数据量
        pageSize: 5,
        totalCount: 0,
        // 搜索框显示或隐藏
        isShow: true,
        // 循环表格
        tableData: [],
        // 表单中的tab切换
        labelPosition: 'left',
        // 新增表单的字段
        menusForm: {},
        // 修改表单的字段
        updateMenuForm: {},
        options: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则'
          }, {
            value: 'daohang',
            label: '导航'
          }]
        }, {
          value: 'zujian',
          label: '组件',
          children: [{
            value: 'basic',
            label: 'Basic'
          }, {
            value: 'form',
            label: 'Form'
          }, {
            value: 'data',
            label: 'Data'
          }, {
            value: 'notice',
            label: 'Notice'
          }, {
            value: 'navigation',
            label: 'Navigation'
          }]
        }, {
          value: 'ziyuan',
          label: '资源',
          children: [{
            value: 'axure',
            label: 'Axure Components'
          }, {
            value: 'sketch',
            label: 'Sketch Templates'
          }, {
            value: 'jiaohu',
            label: '组件交互文档'
          }]
        }],
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        menuDate: ''
      }
    },
    created () {
      this.queryMenus()
    },
    methods: {
      queryMenus() {
        this.$axios.get('http://localhost:8443/queryMenus').then(resp => {
          if (resp && resp.status === 200) {
            this.tableData = resp.data
          }
        })
      },

      /**
       * @author hpx
       * @date 2021/9/27 10:58
       * 新增表格数据
       */
      addMembers() {
        this.isAddMembers = true
        this.labelPosition = 'left'
        this.menusForm = {
          icon: '',
          d: '否',
          e: '否',
          f: '是',
          menus_name: '',
          address: '',
          name: '',
          a: 1,
          catalog: ''
        }
      },
      /**
       * @author hpx
       * @date 2021/9/24 8:58
       * 点击编辑时弹框打开
       */
      modifyData(index, row) {
        this.centerDialogVisible = true
        this.updateMenuForm = Object.assign({}, row) // 重置对象
      },
      /**
       * @author hpx
       * @date 2021/10/13 15:22
       * 保存并提交新增数据
       */
      submitForm() {
        if (this.menusForm.icon === '' || this.menusForm.name === '' || this.menusForm.menus_name === '' || this.menusForm.address === '' || this.menusForm.catalog === '') { // 非空校验
          this.$confirm('请输入完整内容?', '提示', {
            type: 'warning'
          })
        } else {
          this.$axios
            .post('http://localhost:8443/addMenus', this.menusForm).then(resp => {
            this.istrue = resp.data
            if (this.istrue == '0') {
              this.$confirm('数据格式不规范?', '提示', {
                type: 'warning'
              })
            } else if (this.istrue == '1') {
              this.isAddMembers = false
            }
          })
          setTimeout(() => {
            this.queryMenus()
          }, 200)
        }
      },
      /**
       * @author hpx
       * @date 2021/10/11 9:58
       * 保存并提交修改数据
       */
      sumbitEditRow() {
        if (this.updateMenuForm.icon === '' || this.updateMenuForm.name === '' || this.updateMenuForm.menus_name === '' || this.updateMenuForm.address === '' || this.updateMenuForm.catalog === '') { // 非空校验
          this.$confirm('请输入完整内容?', '提示', {
            type: 'warning'
          })
        } else {
          this.$axios
            .post('http://localhost:8443/updateMenus', this.updateMenuForm).then(resp => {
            this.sysUser = resp.data.sysUser
            this.isvalidate = resp.data.isvalidate
            if (this.isvalidate == '0') {
              this.$confirm('数据格式不规范?', '提示', {
                type: 'warning'
              })
            } else if (this.isvalidate == '1') {
              this.centerDialogVisible = false
            }
          })
        }
        setTimeout(() => {
          this.queryMenus()
        }, 200)
      },
      /**
       * @author hpx
       * @date 2021/9/24 14:01
       * 删除数据
       */
      removeRoles(id) {
        this.$confirm('此操作将永久删除该文件?', '提示', {
          type: 'warning'
        }).then(() => {
          this.$axios
            .post('http://localhost:8443/deleteMenus', {
              id: id
            }).then(resp => {
            if (resp && resp.status === 200) {
              this.queryMenus()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      /**
       * @author hpx
       * @date 2021/9/27 10:58
       * 关闭弹框
       */
      closeDialog() {
        this.centerDialogVisible = false
        this.isAddMembers = false
        this.reload() // 刷新页面
      },
      /**
       * @author hpx
       * @date 2021/9/26 14:58
       * 重置搜索框，日期，下拉框
       */
      resetForm: function () {
        this.input = ''
        this.menuDate = ''
      },
      /**
       * @author hpx
       * @date 2021/9/26 14:58
       * 搜索框显示隐藏
       */
      changeIsShow() {
        this.isShow = !this.isShow
      },
      /**
       * @author hpx
       * @date 2021/9/26 14:58
       * 刷新表格
       */
      refresh() {
        this.reload()
      },
      handleChange (value) {
        console.log(value)
      }
    }
  }
</script>

<style scoped>
  .top{
    padding-bottom: 18px;
  }
  .top span{
    line-height: 32px;
    margin-right: 10px;
  }
  .el-left{
    display: flex;
  }
  .el-left>.el-form-item{
    flex: 1;
    margin-bottom: 18px;
  }
  .el-top{
    display: flex;
  }
  .el-top>.el-form-item{
    flex: 1;
    margin: 0px 10px 18px 0px;
  }
  .el-col-lg-20 {
    width: 100%;
  }
  .table-grid-content {
    border-radius: 4px;
    height: 50px;
    background: #ebeef5;
    padding: 10px;
  }
  .btn_x{
    display: inline-block;
    width: 40px;
    height: 40px;
    background: #F56C6C;
    border-radius: 50%;
    margin-left: 10px;
    color: white;
  }
</style>
